
    <ion-content class="card-background-page">

<div>
      <!--<ion-img  src="http://owhah4u2f.bkt.clouddn.com/redhouse3.jpg"></ion-img>-->
  <img src="http://owhah4u2f.bkt.clouddn.com/redhouse3.jpg" alt="">
      <div class="card-title">让你在每个城市都有家 &nbsp;| &nbsp; <i id="go-serch" (click)="toSearch()"><img src="../../assets/images/go-serch.png" alt=""></i></div>
</div>


<!-----------------------选项卡按钮-->

      <div padding style="border-top-left-radius:5px;border-top-right-radius: 5px" >
        <ion-segment [(ngModel)]="pet"   style="font-size: 1.2em">
          <ion-segment-button value="0" >
      我要租房
          </ion-segment-button>
          <ion-segment-button value="1" >
            我要出租
          </ion-segment-button>
        </ion-segment>
      </div>


      <!-----------------------选项卡内容-->
      <div [ngSwitch]="pet" >


        <ion-list  *ngSwitchCase="'0'"  >
          <ion-grid>
            <ion-row id="home-icon" style="font-size: 1em">
              <ion-col col-md-4>
                <img src="../../assets/images/house.png"  (click)="toSearch()"  alt="">
              <p>普通租房</p>
              </ion-col>
              <ion-col col-md-4>
                <img src="../../assets/images/map.png"  (click)="toSearch()"  alt="">
              <p>区域找房</p>
              </ion-col>
              <ion-col col-md-4>
                <img src="../../assets/images/shaixuan.png"  (click)="toSearch()"  alt="">
              <p>筛选租房</p>
              </ion-col>
            </ion-row>




          </ion-grid>
        </ion-list>


        <ion-list *ngSwitchCase="'1'">
          <ion-grid>
            <ion-row id="sethome-icon">
              <ion-col col-md-6>
                <img (click)="toOwner()" src="../../assets/images/shafa.png" alt="">
                <br>
                <span>我要出租</span>
              </ion-col>
              <ion-col col-md-6>
                <img (click)="toMyhouses()" src="../../assets/images/key.png" alt="">
                <br>
                <span>我的房子</span>
              </ion-col>
            </ion-row>

            <ion-row id="sethome-text">




            </ion-row>


          </ion-grid>
        </ion-list>



      </div>

      <!---------------------------------------头条-->

<div style=" background-color: rgba(2,2,2,0.09);height: 48px " padding (click)="toNews()">
  <div style="width: 20%;float: left; margin-top: -11px" >
    <img src="../../assets/images/topnew.png" alt="">
  </div>
  <div style="width: 80% ; float: left" >
   <p > <i style="color: rgba(128,128,128,0.57); font-size: 18px">|</i> &nbsp; &nbsp;人民山东手机卡电话介绍卡活动</p>
  </div>
</div>

      <!-------------------------------------常用工具-->
  <ion-grid>

    <ion-row>
      <h2>常用工具</h2>
    </ion-row>

    <ion-row id="home-icon">
      <ion-col col-md-4>
        <img src="../../assets/images/jisuanqi.png" alt="">
        <p>计算器</p>
      </ion-col>
      <ion-col col-md-4>
        <img src="../../assets/images/map1.png" alt="">
        <p>帮你找房</p>
      </ion-col>
      <ion-col col-md-4>
        <img src="../../assets/images/baike.png" alt="">
        <p>百科</p>
      </ion-col>
    </ion-row>




  </ion-grid>
      <ion-row>
        <h2>猜你喜欢</h2>
      </ion-row>
      <ion-list>
        <ion-item-sliding *ngFor="let house of houses | search:searchText | quyu:quyuText | zujin:zujinText | mianji:mianjiText | zujinxiao:zujinxiaoText ;trackBy: trackByHouses">

          <ion-item (click)="toDetail(house)">
            <ion-avatar item-start>
              <img style="border-radius: 0%;width: 96px;height: 80px" src="http://owhah4u2f.bkt.clouddn.com/images/houses/{{house.houseId}}/1.jpg">
            </ion-avatar>

            <h2 style="font-size: 1.1em;margin-top: 1px">{{house.houseName}}</h2>
            <p>{{house.room}}室{{house.livingroom}}厅{{house.bathroom}}卫/{{house.aspect}}/{{house.areaName}}</p>
            <!--<div>-->
            <div>
              <span class="biaoqian">随时看房</span>
              <span style="float: right;font-size: 0.8em;color: #8e9093">{{house.publishTime.slice(0,10)}}</span>
            </div>
            <!--</div>-->
            <div>
              <span style="color: red;font-size: 1.1em">{{house.housePrice}}元／月</span>
              <span style="color: black;font-size: 1.1em;float: right">{{house.area}}平</span>
            </div>



          </ion-item>


        </ion-item-sliding>
      </ion-list>

      <!--下拉加载-->
      <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite($event))">
        <ion-infinite-scroll-content
          oadingSpinner="bubbles"
          loadingText="Loading more data...">

        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

      <ion-item *ngIf="noMore">
        没有更多房源了哦~~
      </ion-item>







    </ion-content>






